<!--/**-->
<!--* @file authUser.vue-->
<!--* @author huang-->
<!--* @date 2023/8/21-->
<!--* @description 分配用户-->
<!--* @projectName-->
<!--* @email newflyhuang@gmail.com-->
<!--*/-->

<template>
  <pure-table ref="pureTable" selection :list-api="listApi" :hide-index="true" :query-condition="queryCondition" @selection-change="handleSelectionChange">
    <template #header>
      <query-panel @query="handleQuery" @reset="resetQuery">
        <el-form-item prop="userName">
          <el-input
            v-model="queryParams.userName"
            placeholder="请输入用户名称"
            clearable
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item prop="phonenumber">
          <el-input
            v-model="queryParams.phonenumber"
            placeholder="请输入手机号码"
            clearable
            style="width: 240px"
          />
        </el-form-item>

        <template #extra>
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="openSelectUser"
          >添加用户</el-button>
          <el-button
            type="danger"
            plain
            icon="el-icon-circle-close"
            size="mini"
            :disabled="multiple"
            @click="cancelAuthUserAll"
          >批量取消授权</el-button>
          <el-button
            type="warning"
            plain
            icon="el-icon-close"
            size="mini"
            @click="handleClose"
          >关闭</el-button>
        </template>
      </query-panel>
    </template>

    <el-table-column type="selection" width="55" align="center" />
    <el-table-column label="用户名称" prop="userName" />
    <el-table-column label="用户昵称" prop="nickName" />
    <el-table-column label="邮箱" prop="email" />
    <el-table-column label="手机" prop="phonenumber" width="140" />
    <el-table-column label="状态" align="center" prop="status" width="80">
      <template #default="{row}">
        <pure-type-text :config="ROLE_TYPE" :type="row.status" />
      </template>
    </el-table-column>
    <el-table-column label="创建时间" align="center" prop="createTime" width="220">
      <template #default="{row}">
        <span>{{ row.createTime }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template #default="{row}">
        <pure-button
          size="mini"
          type="text"
          label="取消授权"
          @click="cancelAuthUser(row)"
        />
      </template>
    </el-table-column>
  </pure-table>
</template>

<script>
import QueryPanel from '@/common/components/query/queryPanel.vue';
import SystemRoleApi from './api';
import DialogAddUser from './dialog/addUser.vue';
import { ROLE_TYPE, } from './config';

export default {
  name: 'AuthUser',
  components: { QueryPanel, },
  data() {
    return {
      ROLE_TYPE,
      listApi: SystemRoleApi.getAssignedUserRoleList,
      // 选中用户组
      users: [],
      // 非多个禁用
      multiple: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleId: undefined,
        userName: undefined,
        phonenumber: undefined,
      },
      queryCondition: {},
    };
  },
  created() {
    const roleId = this.$route.params && this.$route.params.roleId;
    if (roleId) {
      this.queryParams.roleId = roleId;
      this.queryCondition = {
        ...this.queryParams,
      };
    }
  },
  methods: {

    // 返回按钮
    handleClose() {
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryCondition = {
        ...this.queryParams,
      };
    },
    /** 重置按钮操作 */
    resetQuery() {
      const roleId = this.$route.params && this.$route.params.roleId;
      this.queryParams = {
        userName: '',
        phonenumber: '',
        roleId,
      };
      this.queryCondition = {
        ...this.queryParams,
      };
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.users = selection.map(item => {
        return {
          userName: item.userName,
          deptId: item.deptId,
          userId: item.userId,
        };
      });
      this.multiple = !selection.length;
    },
    /** 打开授权用户表弹窗 */
    openSelectUser() {
      // this.$refs.select.show();
      this.$dialog({
        component: () => <DialogAddUser roleId={this.queryParams.roleId} onDone={this.onDone}/>,
      });
    },
    onDone() {
      this.$refs.pureTable.fetchData();
    },
    /** 取消授权按钮操作 */
    cancelAuthUser(row) {
      this.$confirm(`确认要取消该用户"${row.userName}"角色吗？`).then(async () => {
        await SystemRoleApi.multipleCancelAuthorization({ grantUserList: [
          {
            deptId: row.deptId,
            userId: row.userId,
          },
        ], roleId: this.queryParams.roleId, });
        this.onDone();
      }).catch(() => {});
    },
    /** 批量取消授权按钮操作 */
    cancelAuthUserAll() {
      const names = this.users.map(item => item.userName).join(',');
      this.$confirm(`确认要取消该用户"${names}"角色吗？`).then(async () => {
        await SystemRoleApi.multipleCancelAuthorization({ grantUserList: this.users, roleId: this.queryParams.roleId, });
        this.onDone();
      }).catch(() => {});
    },
  },
};
</script>
